<template>
	<div class="tree"></div>
</template>
<style>
	.tree a {
    color: #3c8dbc !important;
    text-decoration: none !important;
	}
	body .inspire-tree [type=checkbox] {
		left: 22px;
	}
</style>
<script>
//	import * as InspireTree from 'static/npm/inspire-tree'
	require('static/plugins/inspire-tree/dist/inspire-tree.css');
	var InspireTree = require('static/plugins/inspire-tree/dist/inspire-tree.js');

	let tree;
	export default {
		data: () => ({
			tree: []
		}),
		methods: {
		  init() {
				let self = this;
				tree = new InspireTree({
							target: '.tree',
							data: self.tree,
							selection: {
									mode: 'checkbox'
							}
				 });
				window.tree = tree;
			},
			deselect() {
				tree.selectable().deselect();
				tree.selectable().collapse();
			},
			expand() {
				//全展开
				tree.selectable().expand();
			},
			collapse() {
				//全收拢
				tree.selectable().collapse();
			},
			initExpand() {
				//一级展开
				tree.nodes().expand();
			},
			get() {
				//available
				let list = tree.selectable();
				return list.filter(player=>{
					let state = player.itree.state;
					return (state.selected == true||state.indeterminate == true);
				}).map(player=>{
					return player.value
				})
			},
			set(map) {
				let list = tree.selectable();
				list.forEach(player=>{

					if(!player.hasOwnProperty("children")) {
						if (map.indexOf(player.value) > -1) {
							let state = player.itree.state;

							if(!state.selected) {
								player.select();
							}
						}
					}
				})
			}
		},
		ready() {
			window.template = this;
		}
	}
</script>
